<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
html, body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}
#wrapper {
  position:relative;
  min-height: 100%;
  height: auto !important;
  height: 100%;
}
#content {
  padding-bottom:40px;
  float: left;  
  width: 500px;
}
#sidebar {
  width: 200px;
  float: left;
}
#footer {
  position: relative;
  margin-top: -40px;
  height: 40px;
  background:green;
  clear: both;
}
#header {
  height: 30px;
  width: 100%;
  background:red;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header"><h1>HEADER</h1></div>
    <div id="content">CONTENT
<div style='height: 700px; background: yellow;'>
    </div>
123
</div>
<div id='sidebar'>SIDEBAR</div>
<div id="footer">FOOTER</div>
</body>
</html>